<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>

    <meta name="layout" content="m-melanin-layout" />

    <title>Cập nhật thông tin cá nhân</title>
    <script>
		window.dhx_globalImgPath="../images/imgs/";
	</script>
	<link rel="STYLESHEET" type="text/css" href="../css/dhtmlxcombo.css">
	
 
	
<%--		<script  src="../js/dhtmlxcommon.js"></script>--%>
<%--	<script  src="../js/dhtmlxcombo.js"></script>--%>
<%--<link rel="stylesheet" href="../css/themes/base/jquery.ui.all.css">--%>
<%--	<script src="../js/jquery-1.7.1.js"></script>--%>
<%--	<script src="../js/jquery.ui.core.js"></script> --%>
<%--	<script src="../js/jquery.ui.widget.js"></script>  --%>
<%--	 <script src="../js/jquery.ui.button.js"></script> --%>
<%--	 <script src="../js/jquery.ui.position.js"></script> --%>
<%--	 <script src="../js/jquery.ui.menu.js"></script>  --%>
<%--	<script src="../js/jquery.ui.autocomplete.js"></script>--%>
<%-- 	<script src="../js/jquery.ui.tooltip.js"></script> --%>
<%-- --%>
<%--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />--%>
<%--<style>--%>
<%--.custom-combobox {--%>
<%--    position: relative;--%>
<%--    display: inline-block;--%>
<%--}--%>
<%--.custom-combobox-toggle {--%>
<%--    position: absolute;--%>
<%--    top: 0;--%>
<%--    bottom: 0;--%>
<%--    margin-left: -1px;--%>
<%--    padding: 0;--%>
<%--/* support: IE7 */--%>
<%--*height: 1.7em;--%>
<%--*top: 0.1em;--%>
<%--}--%>
<%--.custom-combobox-input {--%>
<%--    margin: 0;--%>
<%--    padding: 0.3em;--%>
<%--}--%>
<%--</style>--%>
<%--<script>--%>
<%--(function( $ ) {--%>
<%--$.widget( "custom.combobox", {--%>
<%--_create: function() {--%>
<%--this.wrapper = $( "<span>" )--%>
<%--.addClass( "custom-combobox" )--%>
<%--.insertAfter( this.element );--%>
<%--this.element.hide();--%>
<%--this._createAutocomplete();--%>
<%--this._createShowAllButton();--%>
<%--},--%>
<%--_createAutocomplete: function() {--%>
<%--var selected = this.element.children( ":selected" )--%>
<%--value = selected.val() ? selected.text() : "";--%>
<%--this.input = $( "<input>" )--%>
<%--.appendTo( this.wrapper )--%>
<%--.val( value )--%>
<%--.attr( "title", "" )--%>
<%--.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )--%>
<%--.autocomplete({--%>
<%--delay: 0,--%>
<%--minLength: 0,--%>
<%--source: $.proxy( this, "_source" )--%>
<%--})--%>
<%--.tooltip({--%>
<%--tooltipClass: "ui-state-highlight"--%>
<%--});--%>
<%--this._on( this.input, {--%>
<%--autocompleteselect: function( event, ui ) {--%>
<%--ui.item.option.selected = true;--%>
<%--this._trigger( "select", event, {--%>
<%--item: ui.item.option--%>
<%--});--%>
<%--},--%>
<%--autocompletechange: "_removeIfInvalid"--%>
<%--});--%>
<%--},--%>
<%--_createShowAllButton: function() {--%>
<%--var input = this.input,--%>
<%--wasOpen = false;--%>
<%--$( "<a>" )--%>
<%--.attr( "tabIndex", -1 )--%>
<%--.attr( "title", "Show All Items" )--%>
<%--.tooltip()--%>
<%--.appendTo( this.wrapper )--%>
<%--.button({--%>
<%--icons: {--%>
<%--primary: "ui-icon-triangle-1-s"--%>
<%--},--%>
<%--text: false--%>
<%--})--%>
<%--.removeClass( "ui-corner-all" )--%>
<%--.addClass( "custom-combobox-toggle ui-corner-right" )--%>
<%--.mousedown(function() {--%>
<%--wasOpen = input.autocomplete( "widget" ).is( ":visible" );--%>
<%--})--%>
<%--.click(function() {--%>
<%--input.focus();--%>
<%--// Close if already visible--%>
<%--if ( wasOpen ) {--%>
<%--return;--%>
<%--}--%>
<%--// Pass empty string as value to search for, displaying all results--%>
<%--input.autocomplete( "search", "" );--%>
<%--});--%>
<%--},--%>
<%--_source: function( request, response ) {--%>
<%--var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );--%>
<%--response( this.element.children( "option" ).map(function() {--%>
<%--var text = $( this ).text();--%>
<%----%>
<%--if ( this.value && ( !request.term || matcher.test(text) ) )--%>
<%--return {--%>
<%--label: text,--%>
<%--value: text,--%>
<%--option: this--%>
<%--};--%>
<%--}) );--%>
<%--},--%>
<%--_removeIfInvalid: function( event, ui ) {--%>
<%--// Selected an item, nothing to do--%>
<%--if ( ui.item ) {--%>
<%--return;--%>
<%--}--%>
<%--// Search for a match (case-insensitive)--%>
<%--var value = this.input.val(),--%>
<%--valueLowerCase = value.toLowerCase(),--%>
<%--valid = false;--%>
<%--this.element.children( "option" ).each(function() {--%>
<%--if ( $( this ).text().toLowerCase() === valueLowerCase ) {--%>
<%--this.selected = valid = true;--%>
<%--return false;--%>
<%--}--%>
<%--});--%>
<%--// Found a match, nothing to do--%>
<%--if ( valid ) {--%>
<%--return;--%>
<%--}--%>
<%--// Remove invalid value--%>
<%--this.input--%>
<%--.val( "" )--%>
<%--.attr( "title", value + " didn't match any item" )--%>
<%--.tooltip( "open" );--%>
<%--this.element.val( "" );--%>
<%--this._delay(function() {--%>
<%--this.input.tooltip( "close" ).attr( "title", "" );--%>
<%--}, 2500 );--%>
<%--this.input.data( "ui-autocomplete" ).term = "";--%>
<%--},--%>
<%--_destroy: function() {--%>
<%--this.wrapper.remove();--%>
<%--this.element.show();--%>
<%--}--%>
<%--});--%>
<%--})( jQuery );--%>
<%--$(function() {--%>
<%--$( ".combobox" ).combobox();--%>
<%--$( "#toggle" ).click(function() {--%>
<%--$( "#combobox" ).toggle();--%>
<%--});--%>
<%--});--%>
<%--</script>--%>
  </head>
  <body>

   <div class="clear"></div>
    <div id="m-melanin-main-content">
      <div style="width:605px;margin:auto">
      <fieldset>
      
      <form method="post" controller="start" action="checkAndAddRole" id="updateForm" name="updateForm" >
       <ol class="form form-clear form-wide" style="padding-left:25px">
       <center><legend style="background:none">Cập nhật thông tin</legend></center>
        <li>
        	<label class="label-left e-xxl" for="name"><font color="red">*</font> User đăng nhập:</label>
		    <label class="label-left e-xxl" for="name"><font color="red">*</font> Nhập họ và tên (Ví dụ: Nguyễn Văn A):</label>
		    
        </li>
        <li>
        	<g:if test="${user?.username != null }">
        		<input type="text" value="${user?.username}"  readonly="readonly" class="validate[required] e-xxl" id="userOutlook" name="userOutlook"/>
        	</g:if>
        	<g:else>
        		<input type="text" value="${userName}"  readonly="readonly" class="validate[required] e-xxl" id="userOutlook" name="userOutlook"/>
        	</g:else>
          	<input type="text" class="validate[required] e-xxl" id="name" name="name"/>
          
        </li>
        
<%--        <li><label class="label-left e-xxl" for="branchName"><font color="red">*</font> Chi nhánh:</label>--%>
<%--        </li>--%>
<%--        <li>--%>
<%--          <input type="text" class="validate[required] e-xxl" id="branchName" name="branchName"/>--%>
<%--        </li>--%>
        <li>
        	<label class="label-left e-xxl" for="branch"><font color="red">*</font> Tên đơn vị (Ví dụ: TT KHCN Láng Hạ):</label>
          	<label class="label-left e-xxl" for="departmentId"><font color="red">*</font> Chọn loại báo cáo phù hợp:</label>
        </li>
        <li>
        	<input type="text" class="validate[required] e-xxl" id="branch" name="branch"/>
          	<g:select class="se-xxl validate[required]" name="department" from="${departments}" optionValue="name" optionKey ="id"
          noSelection="['':'-Vui lòng chọn-']"/>
        </li>
        <li>
        <br><br>
        <center><legend style="background:none">Cập nhật thông tin chi tiết</legend></center>
        <br>
        <li class="allTop">
          <label for="TenDonVi" class="label-left e-xxl"><font color="red">*</font> Phòng Giao dịch/Phòng Ban/Tổ Nhóm </label>
   	      
   	      <label for="TenDonVi" class="label-left e-xxl"><font color="red">*</font> Chi nhánh/Trung tâm/Phòng Ban </label>
   	      <br>
<%--   	      allUnitDepart3--%>
   	      <g:select name="PGD" id="PGD" class="validate[required] se-xxl" from="${}"
		   	      				value="" optionKey="id" optionValue="${{ it?.name} }" noSelection="${['':'']}"/> 
<%--   	  allUnitDepart2     --%>
			<g:select  name="CN" id="CN" class="validate[required] se-xxl " from="${}"
		   	      				value="" optionKey="id" optionValue="${{it?.code+'-'+it?.name} }" noSelection="${['':'']}"/>
		   </li>
		   
		   	
		   <li class="allTop">
		   	     <label for="NHCD" class="label-left e-xxl"><font color="red">*</font> NH Chuyên doanh/Khối </label>
		   	     <label for="title" class="lableCenter e-xxl"><font color="red">*</font> Chức danh (VD: Giao dịch viên)</label>
		   	      <br>
				  <g:select class="validate[required] se-xxl combobox" name="NHCD" id="NHCD" from="${UnitDepart.executeQuery('from UnitDepart e where e.ord=1 and e.status>=0 order by e.code+0')}"
					optionKey="id" optionValue="${{it?.name}}" noSelection="${['':'']}"	/>
		   	      <input type="text" value="${masterUser?.title }"  name ="title"    id="title" class="validate[required] text-input e-xxl">
		   </li> 
		 
	   
	    <li>
	       <label for="bdsUser" class="lableCenter e-xxl">User hệ thống (VD: DD20010)</label>
	       <label for="IdNhanSu" class="lableCenter e-xxl">ID nhân sự (VD: MSB00073)</label>
	       <br>
	    	<input type="text" value="${masterUser?.bDSUser }"  name ="bdsUser" id="bdsUser"  class="text-input e-xxl">
	    	<input type="text" value="${masterUser?.codeSalary }"  name ="IdNhanSu" id="IdNhanSu"  class="text-input e-xxl">
	    </li>
	 	
	 	
        
        <center> <input class="btn primary" type="submit" id="save" name="save" value="Lưu"/></center>
 
        
      </ol>
    </form>
        </fieldset>
      </div>
    </div>
    <script type="text/javascript" >
   
	  var z3=dhtmlXComboFromSelect("PGD");
			z3.enableFilteringMode(true);
	var z2=dhtmlXComboFromSelect("CN");
	z2.enableFilteringMode(true);
	var z1=dhtmlXComboFromSelect("NHCD");
	z1.enableFilteringMode(true);
      $(document).ready(function(){
 
          
    	  z2.attachEvent("onChange", onChangeFunc2);
    	  z1.attachEvent("onChange", onChangeFunc1);
    	  function onChangeFunc1() {
<%--        	  alert(3);--%>
        	  if(!z1.getSelectedText()){
					z2.clearAll();	
					z3.clearAll();	
              }
        	  $("#PGD").val("");
			  $("#CN").val(""); 
    		  if(z1.getSelectedValue()){
	    		  $.getJSON('${createLink(controller:'unitDepartment',action:'getUnitDepart2')}?parent_id='+z1.getSelectedValue(),function(unitDepart2){
	    			z2.clearAll();
	    			
	  				for(var i=0;i<unitDepart2.length;i++)
	  				{			
	  						z2.addOption(""+unitDepart2[i].id+"",""+unitDepart2[i].name.trim()+"");											 
	  				}	
	  				  });												
	    	   }
	    	   		
    		    return true;
    		}
    	  function onChangeFunc2() {
<%--    		          	  alert(z2.getSelectedValue());--%>
				if(!z2.getSelectedText()){					 
					z3.clearAll();		
				} 
				$("#PGD").val("");
    		    if(z2.getSelectedValue()){
    		    	$.getJSON('${createLink(controller:'unitDepartment',action:'getUnitDepart2')}?parent_id='+z2.getSelectedValue(),function(unitDepart3){
    	    	    for(var i=0;i<unitDepart3.length;i++)
    	    	    {	
    	    	      	z3.addOption(""+unitDepart3[i].id+"",""+unitDepart3[i].name.trim()+"");											 
    	    	    }													
    	    	      			
    	    	    });											
    		  	}
    		  	    	   		
    		    return true;
    		}
          $("#updateForm").validationEngine();
          $("#unitDepartmentId").change(function(){
				
				options = "<option ></option>";
				var index=$(this).val();

				if($("#unitDepartmentId option:selected").text()=='...')
				{
					$("#addMoreControl").show('slow')					
				}
				else
				{
					$("#addMoreControl").hide('fast')
					$("#otherUnitDepart").val('')
					
					}
				
				
			    });
          $("#NHCD").change(function(){
          	$("select[name=CN]").html("");
  			 
        		options = "<option ></option>";
        		var index=$(this).val();
        	 	if(index != ''){		
	        		$.getJSON('${createLink(controller:'unitDepartment',action:'getUnitDepart2')}?parent_id='+index,function(unitDepart2){
	        				for(var i=0;i<unitDepart2.length;i++)
	        					{			
	        							options += "<option value='" + unitDepart2[i].id  + "'>" +unitDepart2[i].code+'-'+ unitDepart2[i].name + "</option>";											 
	        					}													
	        				
	        			$("select#CN").html(options); });
        	 	}	
        	 	else
        	 		$("select#CN").html(options);        										
        	});



    	$("#CN").change(function(){
    	      	
    	      	options = "<option ></option>";
    	      	var index=$(this).val();						
    	      	if(index != ''){				
	    	      	$.getJSON('${createLink(controller:'unitDepartment',action:'getUnitDepart2')}?parent_id='+index,function(unitDepart3){
	    	      			for(var i=0;i<unitDepart3.length;i++)
	    	      				{												
	    	      						options += "<option value='" + unitDepart3[i].id  + "'>" +unitDepart3[i].code+'-'+ unitDepart3[i].name + "</option>";											 
	    	      				}													
	    	      			
	    	      		$("select#PGD").html(options); });	
    	      	}else
    	      		$("select#PGD").html(options); 					
    	});
    	$("select[name=CN]").change(function(){
    		
    		if ($(this).val()){
    		
    		$("select[name=NHCD]").html("");
    		$("select[name=PGD]").html("");
    			
    			
    			$.post('${createLink(controller:'unitDepartment',action:'getChildNodes')}/CN',
    				$("form[name=updateForm]").serialize(),function(data){
    					$("select[name=PGD]").html(data);               	});
    					
    			$.post('${createLink(controller:'unitDepartment',action:'getFirstNodesFromLevel2')}/CN',
    			$("form[name=updateForm]").serialize(),function(data){
    					$("select[name=NHCD]").html(data); 	});
    		} 
    	
    	});
	    //chon don vi cap1 hien ra cap 2 va 1	
 
	  	

      });
    </script>
  </body>
</html>
